<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script src="../dist/tinyselect.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/tinyselect.css" />
    <link rel="stylesheet/less" type="text/css" href="../example-resource/example.less" />
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/codemirror.css" />
    <script src="../lib/codemirror/codemirror.js"></script>
    <script src="../lib/codemirror/mode/javascript/javascript.js"></script>
    <script src="../lib/codemirror/mode/css/css.js"></script>
    <link rel="stylesheet/less" type="text/css" data-code="true" href="../example-resource/gridlike.less" />
    <script src="../example-resource/source.js"></script>
</head>

<body>
    <div class="tinyselectcontext-container">
        <div id="tinyselectcontext"></div>
    </div>

    <div class="tips">
        这里通过给下拉组件添加一个样式类"grid-like"来自定义弹出框的样式。
    </div>
    <script>
        $.getJSON('../example-resource/data.json').then(function(data) {
            TinySelect('#tinyselectcontext', {
                css: 'grid-like',
                item: {
                    data: data,
                    // 设置所有项可见，这个属性可以阻止组件计算高度
                    visible: 0
                },
                style: {
                    width: 164
                }
            });
        });
    </script>
</body>

</html>